<template>
  <div style="margin-top: 100px; margin-left: 100px">
    <el-input
      v-model="location"
      placeholder="请输入查询地点："
      size="large"
      style="width: 200px"
    ></el-input>
    <el-button type="" size="large" @click="goclick()">查询</el-button>
    <div class="outside">
      <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true">
        <bm-local-search
          keyword="景点"
          :auto-viewport="true"
          :location="locations"
        ></bm-local-search>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        <bm-overview-map
          anchor="BMAP_ANCHOR_TOP_RIGHT"
          :isOpen="true"
        ></bm-overview-map>
      </baidu-map>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
let location = ref<string>('北京')
let locations = ref<string>('北京')

const goclick = () => {
  locations.value = location.value
}
onMounted(() => {
  locations.value = location.value
})
</script>

<style scoped>
.map {
  display: flex;
  margin-top: 30px;
  width: 85%;
  height: 800px;
  overflow: auto;
}
</style>
